<template>
  <div></div>
</template>

<script setup lang="ts">
import { defineExpose } from 'vue';
function showToast(content, duration = 5000) {
  let toast = document.getElementById('Toast');
  if (toast == null) {
    toast = document.createElement('div');
    toast.setAttribute('id', 'Toast');
    toast.setAttribute('class', 'toast-layout');
    document.body.appendChild(toast);
    showToast(content, duration);
    return;
  }
  var toastItem = document.createElement('div');
  toastItem.setAttribute('class', 'toast');
  toastItem.innerHTML = '<div class="content">' + content + '</div>';
  setTimeout(function () {
    toastItem.setAttribute('class', 'toast hide-toast');
  }, duration);
  toastItem.onanimationend = function () {
    toastItem.remove();
  };
  toast.appendChild(toastItem);
}

defineExpose({ showToast });
</script>

<style>
.toast-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 100;
}
.toast .content {
  font-size: 12px;
  margin: auto;
  margin-top: 16px;
  margin-bottom: 16px;
  width: max-content;
  padding: 4px 8px;
  text-align: center;
  color: #eedddd;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

.hide-toast {
  animation: remove 0.5s ease-out;
}
@keyframes remove {
  from {
    height: 56px;
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}
</style>
